<template>
  <view class="content">
    <view class="header">
	 <div style="flex:1;">
		 <u-search
			  placeholder="请输入查询" 
			  @clear="clearSearch" 
			  @change='searchChange'
			  :show-action='false' 
			  v-model="searchValue" 
			  shape="round" 
			  clearabled>
		 </u-search>
	 </div>
    </view>
    <view class="main">
      <view class="main_body" v-for="(item, index) in list" :key="index">
        <view class="detail">
          <view class="main_content">
            <view class="main_body_view">
              货位：{{ item.code}}
            </view>
          </view>
        </view>
		<view class="button" style="margin-bottom: 10px;">
			<u-button type="primary" size="mini" @click="handleConfirm(item)">确定</u-button>
		</view>
		<view class="footer" />
      </view>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request.js";

export default {
  data() {
    return {
	 workOrderId: null,
	  locationList: [], //货位列表
	  searchValue: '', // 搜索值
	  workOrderId: null, // 存储 workId 的变量
	  formattedDevices: [], // 筛选后的数组
	  list: [], //搜索用的数组
    };
  },
  onLoad(options) {
  	uni.showLoading({
  		title: '正在加载中'
  	})
	console.log("op", options)
	this.workOrderId = options.workId
	this.getLocation()
	this.workOrderId = options.workId
  	uni.hideLoading()
  },
  methods: {
	getLocation() {
		request({
			url: 'system/location/list',
			method: "GET",
		}).then(res => {
			this.locationList = res.data.slice(9)
			this.list = this.locationList
		})
	},
	handleConfirm(item) {
		console.log("12", item)
		uni.redirectTo({
			url: 'detail?workId='+ this.workOrderId + "&item=" + 
			encodeURIComponent(JSON.stringify(item))
		});
	},
	// 模糊搜索
	async searchChange(e) {
		if (e === '') {
		  this.list = this.locationList
		} else {
		  this.list = this.locationList.filter(item => item.code && item.code.includes(e));
		}
		// this.reset();
	},
	clearSearch() { //清空搜索内容
		this.searchValue = ''
		this.list = this.locationList
	},
  },
};
</script>

<style lang="scss" scoped>
	.content {
		background: rgb(244, 249, 254);
		.header {
			position: sticky;
			top: 0;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;
			background:#f4f9fe;
			box-shadow:0px 3px 10px rgba(0, 124, 233, 0.16);
			margin-bottom: 10upx;
			/deep/ .u-search__content {
				background-color: #ffffff !important;
			}
			/deep/ .u-search__content__input {
				background-color: #ffffff !important;
			}
		}
		
		.main {
			margin-bottom: 100px;
			.main_body {
				background-color: rgb(226, 241, 255);
				margin: 20upx;
				border-radius: 2%;
				border:1px solid;
				border-color:rgba(0, 124, 233, 0.4);
				.title {
					border-bottom:1px solid;
					border-color:rgb(140, 196, 246);
					padding: 20upx;
					.main_body_view {
						margin: 10upx;
					}
							
					.main_body_view_title {
						
						margin-bottom: 10upx;
					}
				}
				.main_content {
					padding: 20upx;
					background-color: #ffffff;
				}
				
				.button {
					position: absolute;
					right: 100upx;
					width: 40rpx;
				}
				.footer{
					height:30px;
					background-color: #ffffff;
					border-bottom-left-radius: 15upx;
					border-bottom-right-radius: 15upx;
				}
			}
		}	
		.tabbar {
			position: sticky;
			bottom: 30upx;
			z-index: 999;
		}
	}
</style>